<template>
    <doc-main>
        <div class="container-fluid">
            <p>样式</p>
            <div class="alert alert-dismissible" :class="'alert-' + type">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <h4 class="fa-2x">{{title}}</h4>
                <p>{{content}}</p>
            </div>
            <div class="col-lg-4">
                <div class="form-group">
                    <label>Title:</label>
                    <input type="text" v-model="title" class="form-control">
                </div>
                <div class="form-group">
                    <label>Content</label>
                    <input type="text" v-model="content" class="form-control">
                </div>
                <div class="form-group">
                    <label>Type</label>
                    <select class="form-control" v-model="type">
                        <option value="success">success</option>
                        <option value="info">info</option>
                        <option value="warning">warning</option>
                        <option value="primary">primary</option>
                        <option value="danger">danger</option>
                    </select>
                </div>
                <div class="form-group">
                    <button class="btn btn-success" @click="openNotify">Open Notify</button>
                </div>
            </div>
            <div class="col-lg-12">
                <code-parsing language="hljs">
this.$notify.open({
    title: 'Title',
    content: 'Content',
    type: 'Type',
    fixed: 'left|mid|right',
    timeout: 5000
});
this.$notify.error(content);
this.$notify.success(content);
this.$notify.warning(content);
this.$notify.info(content);
this.$notify.primary(content);
this.$notify.danger(content);
                </code-parsing>
                <h5>参数</h5>
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>属性</th>
                        <th>说明</th>
                        <th>类型</th>
                        <th>默认值</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>type</td>
                        <td>提示框类型</td>
                        <td>String [success,info,warning,primary,danger]</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>title</td>
                        <td>提示框标题</td>
                        <td>String</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>content</td>
                        <td>提示框内容</td>
                        <td>String</td>
                        <td>-</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </doc-main>
</template>

<script>
    import DocMain from '../layout/DocMain.vue';
    import CodeParsing from '../layout/CodeParsing';

    export default {
        components: {
            DocMain,
            CodeParsing
        },
        data () {
            return {
                type: 'success',
                title: 'Success',
                content: 'Best check yo self, you\'re not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna'
            };
        },
        methods: {
            openNotify () {
                this.$notify.open({
                    title: this.title,
                    content: this.content,
                    type: this.type,
                    timeout: 5000
                });
            }
        }
    };
</script>

<style>

</style>
